@font-face {
  font-family:DroidSans;
  src:url('../fonts/DroidSans.ttf');
  }

@font-face {
  font-family:DroidSans;
  font-weight:bold;
  src:url('../fonts/DroidSansBold.ttf');
  }

@font-face {
  font-family:DroidSansMono;
  src:url('../fonts/DroidSansMono.ttf');
  }


/* It would be great if we could apply this style to selects too, but a bug
   in Safari prevents us unfortunately. See 
   http://redrata.com/2011/07/safari-woff-select-field-crash/ */
input,
textarea,
body { font-family:DroidSans,'Lucida Grande',sans-serif; }

textarea.code,
code,
pre,
div.CodeMirror { font-family:DroidSansMono,monospace; }

p code {
  font-size:12px;
  line-height:20px;
  background:#f0f8fa;
  padding:2px;
}

body {
  background:#eee;
  color:#222;
  }

#page {
  left:60px;
  padding:20px;
  }

.overlay > .mask,
.loading > .mask,
.fill,
.fill-s,
.fill-n,
.fill-w,
.fill-e {
  position:absolute;
  left:0px;
  top:0px;
  bottom:0px;
  right:0px;
  display:block;
  }

body.overlay > .mask,
body.loading > .mask { position:fixed; }

.fill-s { top:auto; }
.fill-n { bottom:auto; }
.fill-w { right:auto; }
.fill-e { left:auto; }

.scrolling { overflow:auto; }

.warning-red {color:red;}

.warning {
  padding:4px;
  border:1px solid #DC3F19;
  box-shadow:rgba(0,0,0,.1) 0px 1px 3px;
  }

.warning-text {
  color:#DC3F19;
  font-size:11px;
  }

a {
  color:#222;
  text-decoration:none;
  }

h1, h2, h3, h4, h5, h6,
label { font-weight:normal; }
.required { color:#c30; }
.description { color:#999; }
.dependent {display:none; }
.centered { text-align:center; }
small { font-size:11px; }

/**
 * Generic loading, overlay classes
 */
.overlay,
.loading { overflow:hidden; }

.overlay > .mask,
.loading > .mask {
  background:url(../images/mask-0-50.png);
  z-index:100;
  }

.overlay .overlay > .mask,
.loading .loading > .mask,
.overlay .loading > .mask,
.loading .overlay > .mask { background:url(../images/mask-0-25.png); }

.loading:after {
  content:'Loading ...';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  left:50%;
  top:50%;
  margin:-20px 0px 0px -20px;
  width:20px;
  height:20px;
  padding:10px;
  background:#444 url(../images/spinner-reverse.gif) 50% 50% no-repeat;
  z-index:101;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

.restartable:after {
  width:100px;
  padding:15px 15px 15px 45px;
  background-position:15px 50%;
  margin:-25px 0px 0px -80px;
  }

.pane > a.restart {
  display:none;
  position:absolute;
  width:100px;
  margin:-15px -70px 0px 0px;
  right:50%;
  top:50%;
  z-index:102;
  }

.restartable > a.restart { display:block; }

/**
 * Pagewide modal messages
 */
#modal {
  display:none;
  position:fixed;
  left:50%;
  top:50%;
  background:url(../images/mask-48-90.png);
  color:#ccc;
  width:480px;
  margin:-120px 0px 0px -240px;
  z-index:102;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

#modal.active { display:block; }

#modal a { color:#fff; }

#modal a.close {
  top:10px;
  right:10px;
  position:absolute;
  }

#modal .content {
  padding:20px;
  font-size:16px;
  overflow:hidden;
  color:#fff;
  }

#modal .content pre {
  font-size:13px;
  max-height:250px;
  padding-right:20px;
  white-space:pre;
  /* http://labnol.blogspot.com/2006/10/html-css-trick-for-displaying-code.html */
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  max-height:300px;
  overflow-y: auto;
  }

#modal .bug {
  border-top:1px solid #666;
  padding:4px 10px 5px;
  text-align:right;
  }

#modal .buttons {
  border-top:1px solid #666;
  padding:9px 10px 10px;
  text-align:center;
  }

#modal .buttons input {
  background:#222;
  color:#fff;
  border-color:#666;
  line-height:30px;
  height:30px;
  margin:0px 5px;
  width:80px;
  text-align:center;
  font-size:16px;
  box-shadow:none;
  }

#modal .buttons input:active {
  box-shadow:inset #666 0px 0px 5px;
  background:#444;
  }

/**
 * Sliding panes
 */
#popup {
  position:fixed;
  bottom:-100%;
  left:50%;
  margin-left:-361px;
  width:720px;
  height:90%;
  z-index:102;
  border:1px solid #666;
  border-bottom:0px;
  border-radius:5px 5px 0px 0px;
  -moz-border-radius:5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  transition:bottom .25s;
  -moz-transition:bottom .25s;
  -webkit-transition:bottom .25s;
  }

#popup.active { bottom:0%; }
#modal.active + #popup {
  z-index:99;
  border-color:#ccc;
  }

#drawer {
  position:absolute;
  left:0px;
  top:0px;
  bottom:0px;
  right:50%;
  z-index:-1;
  opacity:0;
  overflow:hidden;
  width:auto;
  margin:10px;
  transition:z-index 100ms, opacity 100ms;
  -moz-transition:z-index 100ms, opacity 100ms;
  -webkit-transition:z-index 100ms, opacity 100ms;
  }

#drawer.active {
  z-index:102;
  opacity:1;
  }

#drawer.mini {
  top:auto;
  right:auto;
  min-width:280px;
  }

#drawer.mini > .content {
  position:relative;
  overflow:visible;
  top:0px;
  padding:0px;
  }

.pane { background:#fff; }

.pane > h2.title {
  height:20px;
  font-size:16px;
  white-space:nowrap;
  padding:10px 10px 9px;
  border-bottom:1px solid #eee;
  }

.pane > a.close {
  position:absolute;
  top:10px;
  right:10px;
  }

.pane > .content { top:40px; }

.pane .pane-actions {
  position:absolute;
  top:-30px;
  right:50px;
  }

/**
 * Header
 */
.bleed {
  position:fixed;
  left:0px;
  top:0px;
  bottom:0px;
  width:60px;
  z-index:11;
  background:#444;
  box-shadow:inset rgba(0,0,0,0.1) -1px 0px;
  }

.bleed a {
  font-weight:bold;
  font-size:10px;
  color:#888;
  text-shadow:rgba(0,0,0,0.5) 0px -1px;
  display:block;
  position:relative;
  width:60px;
  padding:30px 0px 10px;
  height:20px;
  overflow:hidden;
  text-align:center;
  }

.bleed a:hover {
  background:#555;
  box-shadow:inset #444 0px 0px 20px 10px;
  }

.bleed a.active {
  background:#333;
  color:#fff;
  box-shadow:
    inset rgba(0,0,0,0.4) 0px 0px 10px,
    inset rgba(255,255,255,0.2) 0px -1px;
  }

.bleed a.disabled,
.bleed a.disabled:hover {
  color:#666;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
  }
.bleed a.disabled .i30 { opacity:0.2; }

.bleed a .i30 {
  position:absolute;
  left:15px;
  top:5px;
  opacity:0.5;
  }

.bleed a.active .i30 { opacity:1; }

.bleed a small { display:none; }
.bleed a:hover small {
  margin:5px;
  border-radius:3px;
  display:block;
  position:relative;
  z-index:1;
  }

.header {
  padding:10px 10px 10px 15px;
  height:20px;
  }

.header h1 { font-size:16px; }

.header .name { font-size:16px; }

.header .project-status { color: #62A0AF; padding: 10px; font-size:12px; }
.preview_image {
  padding:5px;
  }

.header .spinner {
  position:fixed;
  right:215px;
  top:10px;
  background:url(../images/spinner.gif) no-repeat;
  visibility:hidden;
  }

.saving .header .spinner { visibility:visible; }

.header .actions {
  z-index:2;
  position:fixed;
  top:10px;
  right:10px;
  height:20px;
  }

.button.dropdown {
  width:100px;
  position:relative;
  }

.dropdown .menu {
  display:none;
  position:absolute;
  top:19px;
  left:-1px;
  width:98px;
  background-color:#7c7c7c;
  border:1px solid #666;
  border-top:0px;
  border-radius:0px 0px 3px 3px;
  }

.dropdown:active .menu,
.dropdown.active .menu { display:block; }

.dropdown .menu a {
  display:block;
  padding:0px 10px;
  color:#fff;
  }

.dropdown .menu a.divfloor { border-bottom:1px solid #666; }
.dropdown .menu a.divceil { border-top:1px solid #666; }

.dropdown .menu a:hover { background-color:#666; }

/**
 * Projects
 */
ul.projects { margin:0px -5px; }

.projects span.actions {
  display:block;
  padding:14px 9px;
  height:30px;
  border:1px solid #ccc;
  margin:0px 5px 10px;
  }

.projects a.thumb {
  display:block;
  padding:9px 9px 9px 69px;
  height:40px;
  margin:0px 5px 10px;
  position:relative;
  overflow:hidden;
  }

.projects a.thumb:hover {
  border-color:#6bc;
  box-shadow:
    #8ef 0px 0px 5px,
    rgba(0,0,0,0.1) 0px 1px 3px;
  }

.projects a.thumb .thumb {
  width:50px;
  height:50px;
  left:4px;
  top:4px;
  position:absolute;
  border-radius:2px;
  background:#fff url(../images/bg.png) 100% 0%;
  box-shadow:inset rgba(0,0,0,0.1) 0px 0px 3px 1px;
  }

.projects a.thumb .icon {
  opacity:0.5;
  position:absolute;
  right:9px;
  top:19px;
  }

.projects a.thumb .icon.info {
  top:30px;
}

.projects a.thumb .icon:hover { opacity:1; }

.projects a.thumb small.description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 20px;
  height: 40px;
}

/**
 * Project
 */
.project .map { background:#fff url(../images/bg.png) 100% 0%; }

.project .map,
.project .workspace {
  top:0px;
  width:50% !important;
  height:auto !important;
  }

.project .workspace { border-left:1px solid #ccc; }

.project.fullscreen .palette { display:none; }
.project.fullscreen .map,
.wax-fullscreen-map {
  position:fixed;
  left:60px;
  right:0px;
  z-index:100;
  width:auto !important;
  }

#map {
  width:auto !important;
  height:auto !important;
  }

/* Metadata mode */
#meta { position:absolute; display:none; z-index:100; }
#meta-map {
  right:320px;
  background:#fff url(../images/bg.png) 100% 0%;
  height:auto !important;
  }

.project.meta > * { display:none; }
.project.meta > #meta { display:block; }

#meta ul {
  width:320px;
  border-left:1px solid #ccc;
  }

#meta ul li {
  padding-left:80px;
  border-color:#ddd;
  }

#meta ul .i40 { position:absolute; right:10px; }

#meta ul li.text { padding-left:20px; }
#meta ul li.buttons { padding-left:20px; }
#meta ul li label { font-size:11px; width:60px; margin-left:-70px; }

#meta .syncHelp { display:block; margin:10px 0px; }


.project.meta .zoomin {
  border-radius:0px 3px 3px 0px;
  -moz-border-radius:0px 3px 3px 0px;
  -webkit-border-radius:0px 3px 3px 0px;
  }

#meta .key {
  padding:2px 8px;
  background:#fff;
  border-color:#ddd #ccc #ccc;
  border-style:solid;
  border-width:2px 2px 4px;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  }

.bboxForm {
  margin:0px 0px 5px;
  height:78px;
  position:relative;
  }

.bboxForm * {
  position:absolute;
  width:60px;
  border:0px;
  font-size:11px;
  background:rgba(255,255,255,0.5);
  box-shadow:none;
  text-align:center;
  }

.bboxForm .n,
.bboxForm .s {
  left:50%;
  margin-left:-30px;
  }

.bboxForm .w,
.bboxForm .e {
  top:50%;
  margin-top:-10px;
  }

.bboxForm .n { top:0%; }
.bboxForm .s { bottom:0%; }
.bboxForm .w { left:0%; }
.bboxForm .e { right:0%; }

.boxselector-box {
  position:absolute;
  box-shadow:
    inset rgba(255,255,255,0.25) 0px 0px 10px,
    rgba(0,0,0,0.5) 0px 0px 0px 2000px;
  }

/* Tooltip container */
.boxselector-instructions-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.boxselector-instructions-tooltip .tooltiptext {
  visibility: hidden;
  width: 190px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.boxselector-instructions-tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.boxselector-instructions-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Remove this not very helpful instruction which also changes cursor behavior on the box edges.
.boxselector-box:after {
  content:'shift + drag';
  position:absolute;
  right:0px;
  bottom:-20px;
  background:rgba(0,0,0,.75);
  color:#ccc;
  display:block;
  padding:0px 5px;
  font-size:11px;
  white-space:nowrap;
  border-radius:0px 0px 3px 3px;
  }
*/

.wax-point-div {
  text-align:center;
  font-weight:bold;
  line-height:35px;
  font-size:11px;
  background:url(../images/sprite.png) -240px -320px no-repeat;
  margin:-36px 0px 0px -20px;
  width:40px;
  height:40px;
  position:absolute;
  }

/**
 * Layers
 */

ul.layers {
  max-height:500px;
  min-height:500px;
  min-width: 420px;
  }

.layers li {
  position:relative;
  border-bottom:1px solid rgba(0,0,0,0.1);
  padding:5px 130px 4px 30px;
  overflow:hidden;
  white-space:nowrap;
  min-width:260px;
  max-width:260px;
  }

.layers li.status-off { color:#999; }
.layers li.status-off .icon.geometry { opacity:0.5; }
.layers li.status-off .icon.visibility { background-position:-700px -180px; }

.layers .ui-sortable-helper {
  background:#fe8;
  padding-top:4px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  box-shadow:rgba(0,0,0,.1) 0px 1px 3px;
  }

.layers li .icon { background-color:transparent; }
.layers li .punc { color:#999; }

.layers li .handle {
  width:20px;
  cursor:move;
  }

.layers li .handle,
.layers li .actions { padding:5px; }
.layers li .handle .icon,
.layers li .actions .icon { float:left; }
.layers li .actions .icon { opacity:0.5; }
.layers li .actions .icon:hover { opacity:1; }

.layers li .actions {
  display: none;
}


.palette {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:12;
  width:40px;
  }

.palette a {
  display:block;
  width:20px;
  height:20px;
  padding:10px 10px 9px;
  position:relative;
  background:rgba(48,48,48,0.95);
  border-bottom:1px solid #555;
  }

.palette a:hover { background:rgba(56,56,56,0.95); }
.palette a:first-child { border-radius:3px 0px 0px 0px; }
.palette a:last-child { border-radius:0px 0px 0px 3px; }

.palette a.active:after {
  content:'';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  right:-11px;
  bottom:5px;
  width:20px;
  height:30px;
  background:url(../images/sprite.png) 0px -250px no-repeat;
  }

/* ### Colors ### */
.editor.overlay { overflow:visible; }
.colors {
  height:20px;
  position:absolute;
  left:5px;
  bottom:5px;
  overflow:hidden;
  }

.colors.active,
.colors:hover {
  z-index:101;
  overflow:visible;
  }

.swatch {
  cursor:pointer;
  position:relative;
  background:url(../images/sprite.png) -20px -220px no-repeat;
  width:20px;
  height:20px;
  float:left;
  }

.swatch .color {
  background:#fff url(../images/sprite.png) 0px -220px no-repeat;
  display:block;
  width:20px;
  height:20px;
  }

#colorpicker {
  border-radius:3px;
  background:url(../images/mask-48-90.png);
  color:#ccc;

  cursor:default;
  display:block;
  position:absolute;
  left:-100px;
  bottom:30px;
  width:200px;
  padding:10px;
  z-index:1;
  }

#colorpicker .caret {
  width:30px;
  height:15px;
  background:url(../images/sprite.png) -40px -385px no-repeat;
  position:absolute;
  top:-15px;
  left:50%;
  margin-left:-15px;
  }

#colorpicker .buttons { text-align:center; }

#colorpicker .button {
  background:#222;
  border-color:#666;
  box-shadow:none;
  width:80px;
  }

#colorpicker .button:active {
  box-shadow:inset #666 0px 0px 5px;
  background:#444;
  }

#colorjack_square canvas {
  position:static !important;
  top:auto !important;
  left:auto !important;
  }

#colorjack_square { height:175px !important; }
#colorjack_square br { display:none; }
#colorjack_square .hexBox { display:none; }
#colorjack_square .hexClose { display:none; }
#colorjack_square .hexString { display:none; }

/**
 * Tabs
 */
.tabs-bar .move-button {
  padding: 1px 2px;
  float: left;
  height: 23px;
  margin: 6px 0 0 0;
}

.tabs-bar .add {
  float: right;
  margin-top: 6px;
  margin-right: 5px;
}

.tabs-container {
  overflow: hidden;
  float: left;
}

.tabs {
  white-space: nowrap;
  position:relative;
  height:30px;
  top: 3px;
  }

.tabs li {
  display: inline-block;
  position:relative;
  top: 5px;
  }

.tabs li a.tab {
  position:relative;
  border:1px solid #ccc;
  border-bottom:0px;
  border-radius:3px 3px 0px 0px;
  box-shadow:
    inset rgba(255,255,255,0.4) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.1) 0px -10px 20px -5px,
    rgba(0,0,0,0.1) 0px 1px 2px;

  padding:4px 29px 5px 9px;
  margin:0px 2px 0px 0px;
  background:#eee;
  color:#888;
  }

.tabs li a.tab:hover { background-color:#eee; }

.tabs li a.tab.active {
  background:#fff;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 2px;
  color:#222;
  z-index:1;
  }

.tabs li a.tab.error { background:#fe8; }

.tabs + a.add { margin:5px 3px 0px; }

.tabs li a.icon {
  opacity:0.5;
  position:absolute;
  right:5px;
  top:0px;
  z-index:1;
  }

.tabs li a.icon:hover { opacity:1; }

/* Layer form */
.layer form.active { display:block; }

/* Templates */
form.templates { margin:60px 10px 10px; overflow:hidden; }
form.templates .templates {
  display:none;
  padding:30px 0px 0px;
  bottom:160px;
  }
form.templates .templates.active { display:block; }
form.templates .templates-legend { bottom:0px; }
form.templates .templates input[type=text],
form.templates .templates textarea { width:100%; }
form.templates .templates textarea { height:100%; resize:none; }
form.templates .templates-options {
  display:none;
  background:#fff;
  padding-top:10px;
  }
form.templates .templates-options.active { display:block; }
form.templates .templates-tokens {
  margin:10px 0px;
  height:60px;
  background:#eee;
  font-size:10px;
  }

/**
 * CodeMirror
 */
.editor .code {
  overflow:hidden;
  top:69px;
  bottom:30px;
  background:#fff;
  border-top:1px solid #ccc;
  box-shadow:rgba(0,0,0,.1) 0px 0px 3px;
  }

.editor .CodeMirror,
.editor .CodeMirror-scroll {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  height:auto!important;
  }

.editor .CodeMirror {
  background:#fff;
  z-index:-1;
  }

.editor .CodeMirror.active { z-index:0; }

.editor .status {
  background:#fe8;
  border-top:1px solid #ccc;
  padding:9px 60px 10px 10px;
  display:none;
  }

.editor .status.active { display:block; }
.editor .status a.close {
  position:absolute;
  right:10px;
  top:10px;
  }

/**
 * Icons
 */
.icon {
  display:block;
  padding:0px;
  width:20px;
  height:20px;
  text-indent:-9999px;
  background:transparent url(../images/sprite.png) 20px 20px no-repeat;
  }

a:hover .icon,
li:hover .icon { display:block; }

.button .icon,
.button:hover .icon {
  float:left;
  display:block;
  margin:-1px -5px;
  background-color:transparent;
  }

.button .icon.labeled,
.button:hover .icon.labeled { margin-right:5px; }

.button .icon.right,
.button:hover .icon.right {
  float:right;
  margin:-1px -10px -1px 0px;
  }

.icon.left {
  float:left;
  }

.icon.right {
  float:right;
  }

.icon.edit           { background-position:0px -180px; }
.icon.extent         { background-position:-20px -180px; }
.icon.delete         { background-position:-60px -180px; }
.icon.visibility     { background-position:-640px -180px; }
.icon.color-picker   { background-position:-40px -180px; }
.icon.close          { background-position:-80px -180px; }
.icon.fonts          { background-position:-100px -180px; }
.icon.legend         { background-position:-280px -180px; }
.icon.prev           { background-position:-140px -180px; }
.icon.next           { background-position:-160px -180px; }
.icon.add            { background-position:-180px -180px; }
.icon.plus           { background-position:-180px -180px; }
.icon.export         { background-position:-420px -180px; }
.icon.reference      { background-position:-320px -180px;}
.icon.dropdown       { background-position:-300px -180px; }
.icon.settings       { background-position:-260px -180px; }
.icon.folder         { background-position:-340px -180px;}
.icon.minus          { background-position:-380px -180px; }
.icon.info           { background-position:-400px -180px; }
.icon.geometry-linestring { background-position:-200px -180px; }
.icon.geometry-point      { background-position:-220px -180px; }
.icon.geometry-polygon    { background-position:-240px -180px; }
.icon.geometry-multilinestring { background-position:-200px -180px; }
.icon.geometry-multipoint      { background-position:-220px -180px; }
.icon.geometry-multipolygon    { background-position:-240px -180px; }
.icon.geometry-raster     { background-position:-360px -180px; }
.icon.layers            { background-position:-520px -180px; }
.icon.file              { background-position:-540px -180px; }
.icon.postgis           { background-position:-660px -180px; }
.icon.sqlite            { background-position:-560px -180px; }
.icon.tooltip           { background-position:-580px -180px; }
.icon.star              { background-position:-600px -180px; }
.icon.cloud             { background-position:-620px -180px; }
.icon.eye               { background-position:-640px -180px; }
.icon.upload            { background-position:-680px -180px; }
.icon.inspect           { background-position:-720px -180px; }

.reverse.edit           { background-position:0px -200px; }
.reverse.inspect        { background-position:-20px -200px; }
.reverse.delete         { background-position:-60px -200px; }
.reverse.color-picker   { background-position:-40px -200px; }
.reverse.close          { background-position:-80px -200px; }
.reverse.fonts          { background-position:-100px -200px; }
.reverse.legend         { background-position:-280px -200px; }
.reverse.prev           { background-position:-140px -200px; }
.reverse.next           { background-position:-160px -200px; }
.reverse.add            { background-position:-180px -200px; }
.reverse.plus           { background-position:-180px -200px; }
.reverse.export         { background-position:-420px -200px; }
.reverse.reference      { background-position: -320px -200px;}
.reverse.dropdown       { background-position:-300px -200px; }
.reverse.settings       { background-position:-260px -200px; }
.reverse.folder         { background-position:-340px -200px;}
.reverse.minus          { background-position:-380px -200px; }
.reverse.info           { background-position:-400px -200px; }
.reverse.geometry-linestring { background-position:-200px -200px; }
.reverse.geometry-point      { background-position:-220px -200px; }
.reverse.geometry-polygon    { background-position:-240px -200px; }
.reverse.geometry-multilinestring { background-position:-200px -200px; }
.reverse.geometry-multipoint      { background-position:-220px -200px; }
.reverse.geometry-multipolygon    { background-position:-240px -200px; }
.reverse.geometry-raster     { background-position:-360px -200px; }
.reverse.layers         { background-position:-520px -200px; }
.reverse.file           { background-position:-540px -200px; }
.reverse.postgis        { background-position:-660px -200px; }
.reverse.sqlite         { background-position:-560px -200px; }
.reverse.tooltip        { background-position:-580px -200px; }
.reverse.star           { background-position:-600px -200px; }
.reverse.cloud          { background-position:-620px -200px; }
.reverse.eye            { background-position:-640px -200px; }
.reverse.upload         { background-position:-680px -200px; }

/* Export status icons */
.icon.processing { background-position:-40px -220px; }
.icon.complete   { background-position:-60px -220px; }
.icon.error      { background-position:-80px -220px; }
.icon.waiting    { background-position:-100px -220px; }
.i40 .icon  { margin-top:20px; }

/* Favorite */
.icon.favorite   { background-position:-140px -220px; }
.icon.favorite.active { background-position:-120px -220px; }

.icon.i30 {
  width:30px;
  height:30px;
  background-position:30px 30px;
  }

.i30.editor   { background-position:0px 0px; }
.i30.projects { background-position:-30px 0px; }
.i30.manual   { background-position:-60px 0px; }
.i30.settings { background-position:-90px 0px; }
.i30.plugins  { background-position:-120px 0px; }

.icon.i40 {
  width:40px;
  height:40px;
  background-position:40px 40px;
  }

.i40.png     { background-position:0px -320px; }
.i40.jpeg    { background-position:0px -320px; }
.i40.tiff    { background-position:0px -320px; }
.i40.webp    { background-position:0px -320px; }
.i40.svg     { background-position:-40px -320px; }
.i40.pdf     { background-position:-40px -320px; }
.i40.mbtiles { background-position:-80px -320px; }
.i40.zip     { background-position:-120px -320px; }
.i40.upload  { background-position:-200px -320px; }
.i40.sync    { background-position:-200px -320px; }
.i40.center  { background-position:-240px -320px; }
.i40.bounds  { background-position:-280px -320px; }

/**
 * Form elements
 */
select,
input[type=text],
textarea {
  line-height:18px;
  height:20px;
  background:#f8f8f8;
  border:1px solid #ccc;
  border-color:#ccc #ddd #ddd;
  padding:0px 2px;
  box-shadow:inset #ddd 0px 2px 3px;
  -moz-box-shadow:inset #ddd 0px 2px 3px;
  -webkit-box-shadow:inset #ddd 0px 2px 3px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

input[type=text].stretch,
textarea.stretch,
select.stretch { width:100%; }

textarea {
  height:auto;
  resize:vertical;
  }

.badge,
.button,
input[type=button],
input[type=submit] {
  font-size:11px;
  border:1px solid #888;
  line-height:20px;
  height:20px;
  cursor:pointer;
  padding:0px 10px;
  background:#999;
  box-shadow:
    inset rgba(255,255,255,0.1) 0px 0px 0px 1px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px,
    inset rgba(255,255,255,0.3) 0px 1px 0px,
    rgba(255,255,255,0.5) 0px 1px 0px,
    rgba(0,0,0,0.05) 0px 2px 1px;
  color:#fff;
  border-radius:3px;
  display:inline-block;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  }

.badge {
  cursor:default;
  box-shadow:none;
  color:#888;
  background:#eee;
  border-color:#ddd;
  }

.button:hover,
input[type=button]:hover,
input[type=submit]:hover {
  background-color:#6bc;
  border-color:#59a;
  }

.button.disabled,
input[type=button].disabled,
input[type=submit].disabled,
.button.disabled:active,
input[type=button].disabled:active,
input[type=submit].disabled:active {
  background:#ccc;
  border-color:#bbb;
  }

.button:active,
.button.active,
input[type=button]:active,
input[type=submit]:active {
  background-color:#378;
  border-color:#267;
  box-shadow:
    inset rgba(0,0,0,0.5) 0px 1px 3px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px;
  }

input.cancel,
input.cancel:hover {
  background:#fff;
  color:#666;
  border-color:#ccc;
  }

#popup input.cancel,
#drawer input.cancel { background:#eee; }

input.cancel:active {
  background:#ddd;
  border-color:#999;
  }

.button.destructive,
.button.restart {
  background-color:#a22;
  border-color:#822;
  }

.button.destructive:active,
.button.destructive.active,
.button.restart:active,
.button.restart.active {
  background-color:#822;
  border-color:#711;
  }

/* Joined buttons */
.joined > * {
  float:left;
  border-radius:0px;
  border-right-width:0px;
  }

.joined > *:first-child { border-radius:3px 0px 0px 3px; }
.joined > *:last-child {
  border-right-width:1px;
  border-radius:0px 3px 3px 0px;
  }
.joined > *:only-child { border-radius:3px; }

.pill {
  white-space:nowrap;
  padding:10px 10px 9px;
  border-bottom:1px solid #eee;
  background:#f4f4f4;
  }

.sunken .pill { background:transparent; }

.pill .button {
  float:none;
  width:100px;
  margin-left:0px !important;
  margin-right:0px !important;
  display:inline-block !important;
  text-align:left !important;
  }

/* Forms */
ul.form h2 { font-size:16px; }

ul.form li {
  padding:10px 20px 9px 120px;
  border-bottom:1px solid #eee;
  background:#fff;
  transition:padding .1s, height .1s;
  -moz-transition:padding .1s, height .1s;
  -webkit-transition:padding .1s, height .1s;
  }

ul.form li.text,
ul.form li.buttons { padding-left:20px; }

ul.form li .inline {
  vertical-align:top;
  display:inline-block;
  }

ul.form li label {
  float:left;
  width:100px;
  margin-left:-110px;
  text-align:right;
  white-space:nowrap;
  }

ul.form .buttons { text-align:center; }

.button.large,
ul.form .buttons .button,
ul.form .buttons input {
  display:inline-block;
  padding-top:4px;
  padding-bottom:4px;
  height:30px;
  margin:0px 5px;
  min-width:100px;
  text-align:center;
  font-size:13px;
  }

ul.form small.description { display:block; }
ul.form select + span.description,
ul.form input + span.description { margin-left:10px; }
ul.form select { width: 200px; }

#page ul.form li { background:transparent; }

/* Progress bar */
.progress,
.progress .bar {
  height:10px;
  padding:0px;
  }

.progress {
  background:#ddd;
  position:relative;
  max-width:200px;
  margin:5px 0px;
  }

.progress .bar {
  background:#6bc;
  position:absolute;
  }

.progress,
.progress .bar {
  border-radius:3px;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.2) 0px 1px 3px,
    inset rgba(255,255,255,0.5) 0px 10px 20px -10px;
  }

/* Slider widget */
.ui-slider,
.ui-slider:before,
.ui-slider-handle,
.ui-slider-range {
  height:16px;
  padding:0px;
  }

.ui-slider {
  position:relative;
  max-width:200px;
  margin:2px 20px;
  }

.ui-slider:before,
.ui-slider-range {
  border-radius:3px;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(0,0,0,0.2) 0px 1px 3px,
    inset rgba(255,255,255,0.5) 0px 10px 20px -10px;
  }

.ui-slider-range {
  background:#6bc;
  position:absolute;
  }

.ui-slider:before {
  content:'';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  left:-20px;
  right:-20px;
  top:0px;
  bottom:0px;
  background:#eee;
  display:block;
  }

.ui-slider-handle {
  width:40px;
  color:#fff;
  font-size:10px;
  line-height:16px;
  text-shadow:rgba(0,0,0,0.5) 0px 1px;
  text-align:center;
  background:#666;
  box-shadow:
    inset rgba(0,0,0,0.2) 0px 0px 0px 1px,
    inset rgba(255,255,255,0.5) 0px 4px 8px -4px;
  border-radius:3px;
  position:absolute;
  top:0px;
  }

.ui-slider-range,
.ui-slider-range-min { left:-20px; padding-right:20px; }
.ui-slider-handle:first-of-type,
.ui-slider-handle:last-of-type { margin-left:-20px; }

/* Small variant */
.ui-slider.small { margin:2px 10px; }
.ui-slider.small:before { left:-10px; right:-10px; }
.small .ui-slider-range,
.small .ui-slider-range-min { left:-10px; padding-right:10px; }
.small .ui-slider-handle { width:20px; }
.small .ui-slider-handle:first-of-type,
.small .ui-slider-handle:last-of-type { margin-left:-10px; }

/* Libraries */
ul.form a.icon.favorite {
  display:inline-block;
  margin-left:-25px;
  }

ul.form .cache.hidden { visibility:hidden; }
ul.form .sublayer.hidden { visibility:hidden;display:none; }
ul.form a.icon.favorite.hidden { visibility:hidden; }

ul.form.expand li {
  visibility:hidden;
  overflow:hidden;
  height:0px;
  padding-top:0px;
  padding-bottom:0px;
  border:0px;
  }

ul.form.expand li.expand {
  visibility:visible;
  overflow:visible;
  height:auto;
  padding-top:10px;
  padding-bottom:9px;
  border-bottom:1px solid #eee;
  }

ul.form .browser {
  display:none;
  top:110px;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  }

ul.form.expand .browser { display:block; }

.library .breadcrumb {
  position:absolute;
  top:40px;
  left:10px;
  }

.library .breadcrumb * {
  float:left;
  padding:5px;
  }

.library .breadcrumb a:active { color:#000; }

.library .assets {
  top:70px;
  padding:0px 10px 10px;
  }

.library .assets a,
.library .assets div.description {
  display:block;
  padding:5px 10px 4px 30px;
  margin:0px 0px 1px;
  background:#eee;
  position:relative;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }

.library .assets a:active { background:#ccc; }

.library .assets div.description {
  padding-left:10px;
  text-align:center;
  }

.library .assets a .icon {
  position:absolute;
  top:5px;
  left:5px;
  }

.library .assets a .icon.folder { opacity:.5; }

.library .assets a.with-size {
  padding-right: 100px;
  }

.library .assets a .size {
  position:absolute;
  top:5px;
  right:5px;
  }

/* Carto reference */
.reference .page,
.fonts .page {
  left:110px;
  padding:10px;
  }

.reference .section { display:none; }
.reference .section.active { display:block; }

.reference ul li {
  border-top:1px solid #eee;
  padding:9px 0px 10px;
  }

.reference .types .type {
  display:inline-block;
  padding:0px 5px;
  background:#fe8;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

/* Features inspection table */
table {
  font-size:11px;
  width:100%;
  }

td,
th {
  border-collapse:collapse;
  padding:0px 10px;
  width:25%;
  overflow:hidden;
  white-space:nowrap;
  }

td { border:1px solid #eee; }

tr.min td,
tr.max td,
tr.min:hover td,
tr.max:hover td {
  color:#222;
  background:#eee;
  border-color:#ddd;
  }

td.Number {
  color:#393;
  text-align:right;
  }

th.header { cursor:pointer; }

.features .description,
.features .buttons {
  text-align:center;
  padding:10px;
  }

/* Font reference */
div.fonts {
  padding:0px 0px 0px 80px;
  overflow:hidden;
  }

.fonts .navigation { text-align:center; }
.fonts .navigation .col { float:left; width:50px; }
.fonts .navigation .col-1 { width:49px; margin-right:1px; }

.fonts .font {
  display:none;
  position:relative;
  padding:5px 10px 4px;
  border-bottom:1px solid #eee;
  overflow:hidden;
  height:20px;
  }

.fonts .font.active { display:block; }

/* Unstyle font selection inputs */
.fonts .font input {
  cursor:pointer;
  display:block;
  border:0px;
  padding:0px;
  width:100%;
  background:transparent;
  box-shadow:none;
  text-indent:0px;
  }

.fonts .font .description {
  visibility:hidden;
  position:absolute;
  text-align:right;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  padding:5px 10px 4px;
  }

.fonts .font.insert .description { visibility:visible; }

/* Exports */
.exports li {
  position:relative;
  padding:5px 10px 4px 50px;
  border-bottom:1px solid #eee;
  }

.exports li.complete,
.exports li.error {
  /*color:#999; Make export filename standout more */
  background:#f8f8f8;
  height: 40px;
  }

.exports .i40 {
  position:absolute;
  left:5px;
  top:5px;
  }

.exports .status,
.exports .description { font-size:11px; }

.exports .status {
  position:absolute;
  right:30px;
  top:15px;
  }

.exports .waiting .status,
.exports .processing .status {
  text-align:right;
  top:5px;
  }

.exports .delete {
  opacity:0.5;
  position:absolute;
  right:5px;
  top:15px;
  }

.exports li:hover .delete { opacity:1; }

.progress {
  margin-left:0px;
  margin-right:0px;
  width:120px;
  }

/* Exports preview */
.preview .button { vertical-align:middle; }
#preview {
  background:#eee url(../images/bg.png) 0% 0% repeat;
  border:1px solid #ccc;
  margin:70px 20px 20px;
  width:auto !important;
  height:auto !important;
  }

/* Error page */
.empty {
  text-align:center;
  font-size:20px;
  padding:40px 20px;
  max-width:680px;
  margin:0px auto;
  }

li .empty {
  padding:10px;
  font-size:13px;
  }

/* Hover */
tr:hover td,
tr:hover th,
.fonts .font:hover {
  background-color:#f0f8fa;
  border-color:#e0e8ea;
  }

/* Manual */
.prose a { color:#5ab; }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight:bold;
  font-size:16px;
  margin:0px 0px 20px;
  }

.prose ol,
.prose ul,
.prose pre,
.prose img,
.prose .CodeMirror,
.prose p { margin:0px 0px 20px; }

.prose .CodeMirror-scroll { height:auto; }
.prose .CodeMirror-lines { padding:0px 0px 0px 20px; }
.prose pre { padding:0px 0px 0px 20px; }

.prose img {
  box-shadow:#ddd 0px 2px 5px;
  -moz-box-shadow:#ddd 0px 2px 5px;
  -webkit-box-shadow:#ddd 0px 2px 5px;
  }

div.manual { margin-right:180px; }

.manual .navigation {
  right:20px;
  position:fixed;
  width:170px;
  padding:10px 0px;
  }

.manual pre { font-size:13px; }

.manual .md { max-width:600px; padding:20px; }

.manual .md ul ul { margin:0px; }

.manual .md h2 { font-size:16px; }
.manual .md h3 { font-size:14px; }
.manual .md h4 { font-size:13px; }

.manual .md ul li { padding-left:20px; }
.manual .md ol li {
  list-style-type:decimal;
  margin-left:20px;
  }

/* About */
.about {
  background:#ddd url(/assets/tilemill/images/tilemill.png) 20px 50% no-repeat;
  margin:0px 0px 10px;
  padding:19px 19px 19px 79px;
  }

.about h2 { font-size:16px; }

.sunken {
  background-color:#ddd;
  border:1px solid #ccc;
  box-shadow:
    inset rgba(0,0,0,0.1) 0px 1px 3px,
    rgba(255,255,255,1) 0px 1px;
  border-radius:3px;
  }

.sunken .sunken {
  background-color:#eee;
  box-shadow:
    inset rgba(255,255,255,1) 0px 1px,
    rgba(255,255,255,1) 0px 1px;
  }

.raised {
  border:1px solid #ccc;
  background:#fff;
  border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
  }

/* ### Navigation */
.navigation span { color:#aaa; }

.navigation span,
.navigation a {
  background:#eee;
  display:block;
  padding:2px 10px;
  margin:0px 0px 1px;
  border-radius:3px;
  }

.navigation a:hover { background:#ddd; }

.navigation a.active {
  background:#6bc;
  color:#fff;
  box-shadow:
    rgba(255,255,255,1) 0px 1px,
    inset rgba(0,0,0,0.5) 0px 1px 3px,
    inset rgba(255,255,255,0.2) 0px 10px 20px -5px;
  }

.pane .navigation {
  position:absolute;
  left:10px;
  top:10px;
  font-size:11px;
  width:100px;
  border-radius:3px;
  }

.pane .navigation a,
.pane .navigation span { border-radius:0px; }
.pane .navigation a:first-child { border-radius:3px 3px 0px 0px; }
.pane .navigation a:last-child { border-radius:0px 0px 3px 3px; }
.pane .navigation .col *:first-child { border-radius:0px; }
.pane .navigation .col *:last-child { border-radius:0px 0px 3px 0px; }
.pane .navigation .col-1 *:last-child { border-radius:0px 0px 0px 3px; }

.manual .navigation a { padding:5px 10px; }

/* Plugins */
ul.form.sunken { margin:0px 0px 10px; }
ul.form li.plugins { border:0px; padding:0px; }
ul.form li.plugins ul { min-height:80px; padding:9px 4px 0px; }
ul.form li.plugins .empty { padding:34px 0px 35px; }
ul.form.installed,
ul.form.available { position:relative; }

.plugin {
  margin:0px 5px 10px;
  padding:9px 19px;
  position:relative;
  }

.plugin .description { display:block; }

.plugin .actions {
  position:absolute;
  right:9px;
  top:9px;
  }

.plugin .error { color:#c33; }

/* Grid list */
ul.grid li {
  float:left;
  padding:0px;
  border:0px;
  width:50%;
  transition:width 200ms;
  -moz-transition:width 200ms;
  -webkit-transition:width 200ms;
  }

@media (max-width:600px) { ul.grid li { width:100%; } }
@media (min-width:1000px) { ul.grid li { width:33.33%; } }
@media (min-width:1400px) { ul.grid li { width:25%; } }

/* Screen-size adjustments */
@media (min-width:1300px) {
  #drawer { right:45%; }
  .project .map { width:55% !important; }
  .project .workspace { width:45% !important; }
  .wax-fullscreen-view .project .map { width:auto !important; }
}
@media (min-width:1400px) {
  #drawer { right:40%; }
  .project .map { width:60% !important; }
  .project .workspace { width:40% !important; }
  .wax-fullscreen-view .project .map { width:auto !important; }
}

/* Fix for sprite-clipping fail in webkit : | */
.exports .status a,
.features .buttons a,
.pane .pane-actions a { position:relative; }

/* Swap retina graphics */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {

  .icon,
  .wax-point-div,
  .swatch,
  .swatch .color,
  #colorpicker .caret,
  .palette a.active:after {
    background-image:url(../images/sprite_2x.png);
    background-size: 800px 480px;
  }

  .about {
    background-image:url(/assets/tilemill/images/tilemill_2x.png);
    background-size: 40px 45px;
  }

  .loading:after {
    background-image:url(../images/spinner-reverse_2x.gif);
    background-size: 20px 20px;
  }

  .header .spinner {
    background-image:url(../images/spinner_2x.gif);
    background-size: 20px 20px;
  }
}
